<template>
  <view class="">
    <!-- 卡片样式（合同列表页） -->
    <ve-card v-if="mode == 'card'" :title="contractItem.contractTypeName" :customContentStyle="{ paddingBottom: '0' }" v-bind="$attrs">
      <template #extra>
        <view class="header-extra" v-if="contractItem.contractFileId" @click="clearCurrentContract(contractItem)">
          <ve-icon class="del-icon" name="delete_2" size="30" /> <text class="del-text">清空当前合同</text>
        </view>
      </template>
      <contractPaneContent :contractIndex="contractIndex" :contractItem="contractItem" />
    </ve-card>
    <!-- 行内卡片样式（新增合同页） -->
    <view v-if="mode == 'inline-card'" class="contract-pane">
      <view class="contract-pane-header">
        <text>{{ contractItem.contractTypeName }}</text>
        <view class="header-extra" v-if="contractItem.contractFileId" @click="clearCurrentContract(contractItem)">
          <ve-icon class="del-icon" name="delete_2" size="30" /> <text class="del-text">清空当前合同</text>
        </view>
      </view>
      <view class="contract-pane-content">
        <contractPaneContent :contractIndex="contractIndex" :contractItem="contractItem" />
      </view>
    </view>
  </view>
</template>
<script setup>
  import contractPaneContent from './contract-pane-content.vue'

  const props = defineProps({
    mode: {
      type: String,
      default: 'card', // card inline-card
    },
    contractItem: {
      type: Object,
      default: () => {},
    },
    contractIndex: Number,
  })

  // 清空当前合同
  const clearCurrentContract = (contractItem) => {
    contractItem.status = 'edit'
    contractItem.contractNo = undefined
    contractItem.contractFileId = undefined
    contractItem.contractFileName = undefined
  }
  // 用户信息
</script>
<style lang="less" scoped>
  .contract-pane {
    background-color: #f7f8faff;
    .contract-pane-header {
      padding: 0 24rpx;
      background-color: #f0f1f3ff;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #191c27;
      display: flex;
      justify-content: space-between;
    }
    .contract-pane-content {
      padding: 0 24rpx;
    }
  }
  .header-extra {
    font-size: 30rpx;
    font-weight: 400;
    color: #f53f3f;
    line-height: 88rpx;
    display: flex;
    align-items: center;
    .del-icon {
      margin-right: 12rpx;
      vertical-align: middle;
    }
    .del-text {
      height: 44rpx;
      line-height: 44rpx;
    }
  }
</style>
